import React, { useState } from "react";
import { ScrollView, View } from "react-native";
import SettingsSection from "./SettingsSection";
import SettingItem from "./SettingItem";
import styles from "./index.style";
import { useTheme } from "@/contexts/ThemeContext";

const NotificationSettings = () => {
  const { colors } = useTheme();
  const [privateChatEnabled, setPrivateChatEnabled] = useState(true);
  const [groupsEnabled, setGroupsEnabled] = useState(true);
  const [channelsEnabled, setChannelsEnabled] = useState(true);
  const [storiesEnabled, setStoriesEnabled] = useState(false);
  const [reactionsEnabled, setReactionsEnabled] = useState(true);

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <ScrollView>
        <SettingsSection title="Notifications for chats">
          <SettingItem
            title="Private Chats"
            subtitle="Tap to change"
            value={privateChatEnabled}
            onValueChange={setPrivateChatEnabled}
            showSwitch
          />
          <SettingItem
            title="Groups"
            subtitle="Tap to change"
            value={groupsEnabled}
            onValueChange={setGroupsEnabled}
            showSwitch
          />
          <SettingItem
            title="Channels"
            subtitle="Tap to change"
            value={channelsEnabled}
            onValueChange={setChannelsEnabled}
            showSwitch
          />
          <SettingItem
            title="Stories"
            subtitle="Tap to change"
            value={storiesEnabled}
            onValueChange={setStoriesEnabled}
            showSwitch
          />
          <SettingItem
            title="Reactions"
            subtitle="Messages, Stories"
            value={reactionsEnabled}
            onValueChange={setReactionsEnabled}
            showSwitch
          />
        </SettingsSection>

        <SettingsSection title="Calls">
          <SettingItem title="Vibrate" rightText="Default" onPress={() => {}} />
          <SettingItem
            title="Ringtone"
            rightText="Default"
            onPress={() => {}}
          />
        </SettingsSection>

        <SettingsSection title="Badge Counter">
          <SettingItem
            title="Show Badge Icon"
            value={true}
            onValueChange={() => {}}
            showSwitch
          />
          <SettingItem
            title="Include Muted Chats"
            value={false}
            onValueChange={() => {}}
            showSwitch
          />
          <SettingItem
            title="Count Unread Messages"
            value={true}
            onValueChange={() => {}}
            showSwitch
          />
        </SettingsSection>

        <SettingsSection title="In-app notifications">
          {[
            "In-App Sounds",
            "In-App Vibrate",
            "In-App Preview",
            "In-Chat Sounds",
            "In-App Pop on Screen",
          ].map((label) => (
            <SettingItem
              key={label}
              title={label}
              value={true}
              onValueChange={() => {}}
              showSwitch
            />
          ))}
        </SettingsSection>

        <SettingsSection title="Events">
          <SettingItem
            title="Contact joined Telegram"
            value={true}
            onValueChange={() => {}}
            showSwitch
          />
          <SettingItem
            title="Pinned Messages"
            value={true}
            onValueChange={() => {}}
            showSwitch
          />
        </SettingsSection>

        <SettingsSection title="Other">
          <SettingItem
            title="Keep-Alive Service"
            value={true}
            onValueChange={() => {}}
            showSwitch
          />
          <SettingItem
            title="Background Connection"
            value={true}
            onValueChange={() => {}}
            showSwitch
          />
          <SettingItem
            title="Repeat Notifications"
            rightText="1 hour"
            onPress={() => {}}
          />
        </SettingsSection>

        <SettingsSection title="Reset">
          <SettingItem
            title="Reset All Notifications"
            rightText=""
            onPress={() => {}}
          />
        </SettingsSection>
      </ScrollView>
    </View>
  );
};

export default NotificationSettings;
